<template>
  <el-card shadow="never">
    <div slot="header">图片设置</div>
    <el-form :model="formData" :rules="rules" ref="settingForm" label-width="80px">
      <el-form-item label="图片上传" prop="image">
        <el-upload :action="uploadApi" list-type="picture-card" :auto-upload="true" :file-list="formConfig.uploadFile.list" name="upload" drag :limit="formConfig.uploadFile.limit" :on-success="onUploadChange" :on-exceed="onUploadExceed" :on-remove="onUploadRemove" :headers="uploadHeaders" :on-error="onUploadError" accept=".jpg,.png,.jpeg">
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="事件" prop="status">
        <!-- <el-switch v-model="formData.type"> </el-switch> -->
        <el-radio-group v-model="formConfig.uploadFile.atype">
          <el-radio :label="1">跳转二维码</el-radio>
          <el-radio :label="2">跳转小程序</el-radio>
          <el-radio :label="3">手机号授权</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formConfig.uploadFile.atype==2" label="AppID" prop="appid">
        <el-input placeholder="请输入小程序AppId" type="text" v-model="formConfig.uploadFile.appid">
          <template slot="append"></template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="formConfig.uploadFile.atype==2" label="路径" prop="path">
        <el-input placeholder="请输入小程序路径" type="text" v-model="formConfig.uploadFile.path">
          <template slot="append"></template>
        </el-input>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
  import { getToken } from '@/utils/auth'
  const token = getToken()
  const Authorization = `Bearer ${token}`

  export default {
    name: 'ImageSetting',
    filters: {},
    props: {
      formData: {
        type: Object,
        default: function () {
          return {}
        },
      },
      formConfig: {
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        atype:0,
        appid:'',
        path:'',
        uploadApi: `${process.env.VUE_APP_BASE_HOST}upload/cloud`,
        uploadHeaders: {
          Authorization,
        },
        rules: {
          name: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            {
              min: 5,
              max: 15,
              message: '长度在 5 到 15 个字符',
              trigger: 'blur',
            },
          ],
        },
      }
    },
    watch: {
      'formConfig.uploadFile.atype': function (val) {
        const { componentId } = this.formConfig
        this.formData.components.forEach((v) => {
          if (v.id === componentId) {
            console.log(v)
            v.atype = val
          }
        })
      },
      'formConfig.uploadFile.appid': function (val) {
        const { componentId } = this.formConfig
        this.formData.components.forEach((v) => {
          if (v.id === componentId) {
            v.appid = val
          }
        })
      },
      'formConfig.uploadFile.path': function (val) {
        const { componentId } = this.formConfig
        this.formData.components.forEach((v) => {
          if (v.id === componentId) {
            v.path = val
          }
        })
      },
    },
    created() {},
    methods: {
      // 文件上传添加
      onUploadChange(res) {
        const { url, filename } = res

        const { componentId } = this.formConfig

        this.formData.components.forEach((v) => {
          if (v.id === componentId) {
            v.url = url
            v.urlList = [{ name: filename, url }]
          }
        })
      },

      // 超出文件
      onUploadExceed() {
        this.$message({
          message: '抱歉，只能上传一张图片',
          type: 'error',
        })
      },

      // 移除
      onUploadRemove() {
        const { componentId } = this.formConfig

        this.formData.components.forEach((v) => {
          if (v.id === componentId) {
            v.url = ''
            v.urlList = []
          }
        })
      },
      async onUploadError(err) {
        if (err.status) {
          this.$message({
            message: '超时，请重新登录',
            type: 'error',
          })

          await this.$store.dispatch('user/logout')
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
          return
        }

        this.$message({
          message: '上传失败，请重试',
          type: 'error',
        })
      },
    },
  }
</script>
